/** *行政区划通用组件 */
<template>
    <el-cascader
        v-model="cascaderVal"
        :props="props"
        show-all-levels
        clearable
        :disabled="disabled"
        separator="/"
        :placeholder="placeholder"
        class="my-cascader"
        @change="cascaderChange"
    />
</template>

<script lang="ts" setup>
    import { ref, reactive, markRaw, onBeforeMount, onMounted, onBeforeUnmount, nextTick, computed, watch } from 'vue';
    import type { Ref, Raw } from 'vue';
    import { getCityOptionApi } from '@/apis';
    import { isPhone } from '@/utils';

    import { useRoute, useRouter } from 'vue-router';
    import { storeToRefs } from 'pinia';
    import { useStore } from '@/store';
    import { ElMessage } from 'element-plus';
    import { Lock, User, Monitor, Phone, Search, RefreshRight, CaretTop, CaretBottom } from '@element-plus/icons-vue';
    const route = useRoute();
    const router = useRouter();
    const store = useStore();

    const cascaderVal: Ref<any[]> = ref([]);

    const {
        disabled = false,
        placeholder = '请选择行政区划',
        isNationwide = false,
    } = defineProps<{
        disabled?: boolean;
        placeholder?: string;
        isNationwide?: boolean;
    }>();
    const defaultValue = defineModel<any>({
        required: false,
        default: '',
    });
    const orgName = defineModel<any>('orgName', {
        required: false,
        default: '',
    });
    const divisionCode = defineModel<any>('divisionCode', {
        required: false,
        default: '',
    });
    const district = defineModel<any>('district', {
        required: false,
        default: '',
    });
    const townStreet = defineModel<any>('townStreet', {
        required: false,
        default: '',
    });
    const village = defineModel<any>('village', {
        required: false,
        default: '',
    });

    watch(
        defaultValue,
        (nval: any, oval) => {
            // console.log(nval instanceof Array)
            // 判断是不是数组
            if (nval instanceof Array) {
                cascaderVal.value = nval;
            } else if (typeof nval == 'string') {
                if (nval) {
                    console.log(nval);
                    console.log(defaultValue.value);
                    console.log(orgName.value);
                    console.log(district.value);
                    console.log(townStreet.value);
                    console.log(village.value);
                    console.log(divisionCode.value);
                    cascaderVal.value = nval?.split(',');
                } else {
                    cascaderVal.value = [];
                }
            }
        },
        {
            immediate: true,
        }
    );

    const props: Raw<any> = markRaw({
        lazy: true,
        checkStrictly: true,
        lazyLoad(node, resolve) {
            const { level } = node; // 获取当前node对象中的level属性
            let pId = isNationwide ? '' : '321200000000';
            if (level > 0) {
                let value = node.value;
                // console.log(value)
                if (value) {
                    let values = value.split('#');
                    pId = values.length > 1 ? values[1] : pId;
                }
            }
            getCityOptionApi({
                pId: pId,
            })
                .then((res: any) => {
                    const nodes = res.data;
                    nodes.forEach((item) => {
                        item.value = item.name + '#' + item.code;
                        item.label = item.name;
                        item.leaf = level >= 2; //判断是否为末尾节点，这个地方是0,1,2三级
                    });
                    resolve(nodes);
                })
                .catch((err) => {});
        },
    });
    // const emits = defineEmits<{
    //     // (e: 'update:isCollapse', data: boolean): void,
    //     'tableSearch': [data: any]
    // }>()

    const cascaderChange = (val: any) => {
        // console.log(val)
        if (defaultValue.value instanceof Array) {
            defaultValue.value = val;
        } else {
            defaultValue.value = val.join(',');
            orgName.value = val
                .map((item: any, index: number) => {
                    if (index == 0) {
                        console.log(0);
                        district.value = item?.split('#')[0];
                    } else if (index == 1) {
                        console.log(1);

                        townStreet.value = item?.split('#')[0];
                    } else if (index == 2) {
                        console.log(2);

                        village.value = item?.split('#')[0];
                    }
                    if (val.length == index + 1) {
                        divisionCode.value = item?.split('#')[1];
                    }
                    return item?.split('#')[0];
                })
                .join('/');
            console.log(orgName.value);
        }
    };
</script>

<style lang="scss" scoped>
    // // 多级选项
    // :deep(.my-cascader) {
    //     box-sizing: border-box;
    //     width: 240px;
    // }
</style>
